<template>
  <div>
      <h3>发表评论</h3>
      <hr>
      <textarea placeholder="请输入要评论的内容" maxlength="120" v-model="msg"></textarea>

      <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>

        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in comments" :key="index">
                <div class="cmt-title">
                    第{{ index+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name}}&nbsp;&nbsp;发表时间：{{ item.add_time | dateFormat }}
                </div>
                <div class="cmt-body">
                    {{ item.content === 'undefined'?'此用户很懒，啥都没说':item.content }}
                </div>
            </div>
        </div>

      <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data(){
      return {
          pageIndex:1, //默认第一页
          comments:[],
          msg:''
      }
  },
  created(){
      this.getComment()
    //   console.log($route.params.id)
      
  },
  methods:{
      getComment(){
          this.$http.get("api/getcomments/"+ this.id +"?pageindex="+ this.pageIndex).then(result=>{
              if(result.body.status === 0 ){
                // this.comments = result.body.message
                // 每当获取到新数据的时候，要拼接数组，不然后面的数组会覆盖掉之前的数据
                // 还可以 apply()+push 方法
                // this.comments.push.apply(null,result.body.message)
                this.comments = this.comments.concat( result.body.message)
                // 还可以用 ES6中的方法 扩张运算符
                // this.comments = [...this.comments,...result.body.message]
                
                // 当然 最基本的就是 for 循环 + .push方法
                
                console.log(this.comments)
              }else {
                  Toast('获取评论失败！')
              }
          })
      },
      getMore(){ //通过点击使pageIndex+1 再次调用getComment方法
          this.pageIndex++;
          this.getComment()
      },
      postComment(){
          if(this.msg.trim().length == 0){
              return Toast('评论不能为空！')
          }
          this.$http.post('api/postcomment/'+ this.$route.params.id,{ content: this.msg.trim()}).then(result=>{
              if(result.body.status == 0){
                  var cmt = { user_name:'匿名用户',add_time:Date.now(),content:this.msg.trim()}
                  this.comments.unshift(cmt);
                  this.msg = "";
              }
          })
      }
  },
  props:['id']
}
</script>
<style lang="less" scoped>
    h3 {
        font-size: 18px;
    }
    textarea {
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list {
     margin: 5px 0;
        .cmt-item {
            font-size: 13px;
            .cmt-title {
                background-color:rgb(233, 66, 16);
                color:#fff;
                line-height: 30px;
            }
            .cmt-body {
                background-color:black;
                color: #fff;
                font-size: 15px;
                line-height: 30px;
                text-indent: 2em;
            }
        }
    }
</style>
